<template>
  <div class="tab-bar-item" @click="itemClick">
      <!-- 具名插槽 未选择效果 -->
    <slot v-if="!isActive" name="item-icon"></slot>
    <!-- 具名插槽 选中效果 -->
    <slot v-else name="item-icon-active"></slot>
    <!-- 动态样式 -->
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    push: String,
    activeColor: {
      type: String,
      default: "red",
    },
  },
  name: "TabBarItem",
    // 计算属性
  computed: {
    isActive() { 
        // 查询所在的位置  ！== -1 代表 存在  
      return this.$route.path.indexOf(this.push) !== -1;
    },
    activeStyle() {
        // 如果 不存在 不设置样式
      return this.isActive ? { color: this.activeColor } : {};
    },
  },
  methods: {
    itemClick() { 
      this.$router.push(this.push);
    },
  },
};
</script>
 
<style lang="less" scoped>
.tab-bar-item { 
  padding: .08rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  color: #808080;
  font-size: 0.426667rem;
  img { 
    margin: 0 auto;
    height: 0.506667rem;
    width: 0.506667rem;
    vertical-align: middle;
  }
}
</style>
